<template>
  <div>
    <a-spin tip="Loading..." :spinning="Loading">
      <div class="batch-create">
        <div class="anchor">
          <a-steps :current="current" direction="vertical"  @change="onChange">
              <a-step :disabled="current <= 0 ? true : false">
                <template slot="title"> 广告组 </template>
                <p slot="description" class="description" > 创建场景 </p>
                <p slot="description" class="description" > 推广目的 </p>
              </a-step>
              <a-step :disabled="current <= 1 ? true : false">
                <template slot="title"> 广告计划 </template>
                <p slot="description" class="description">投放范围</p>
                <p slot="description" class="description">投放目标</p>
                <p slot="description" class="description">用户定向</p>
                <p slot="description" class="description">预算与出价</p>
              </a-step>
              <a-step :disabled="current <= 2 ? true : false">
                <template slot="title"> 广告创意 </template>
                <p slot="description" class="description">投放位置</p>
                <p slot="description" class="description">制作创意</p>
                <p slot="description" class="description">创意分类</p>
              </a-step>
              <a-step :disabled="current <= 3 ? true : false">
                <template slot="title"> 批量规则 </template>
                <p slot="description" class="description">批量配置</p>
                <p slot="description" class="description">提交规则</p>
              </a-step>
            </a-steps>
        </div>
        <div class="content" ref="batchContent" >
          <!-- 广告组 -->
          <campaign v-show="current === 0" @nexts="nexts"></campaign>
          <!-- 广告计划 -->
          <ad v-show="current === 1" @nexts="nexts"></ad>
          <!-- 广告创意 -->
          <creative v-show="current === 2"  @nexts="nexts"></creative>
          <!-- 批量Table -->
          <batch v-if="current === 3"></batch>
        </div>
      </div>
     </a-spin>
  </div>
</template>

<script>
import { ad,batch,creative,campaign } from "./module";

export default {
  components:{ ad,batch,creative,campaign },
  data() {
    return {
      current:0,
      Loading:false
    };
  },
  created(){
    // 复制计划回显数据
    if( Object.keys(this.$route.query).length !== 0 ){
      let datas = JSON.parse(this.$route.query.data)
      this.Loading = true
      this.$store.commit('SET_ECHO_VIEW_ACCOUNT_ID',datas.accountForm)
      this.$store.commit('SET_ECHO_VIEW_CAMPAIGN',datas.campaignForm)
      this.$store.commit('SET_AD_FORM',datas.adForm );
      this.$store.commit('SET_CREATIVE_FORM',datas.creativeForm)
      this.$store.commit('SET_CREATIVE_GROUPS_VIEW',datas.creativeGroups)
      setTimeout(() => { this.Loading = false }, 1000);
    }
    // 清空本地缓存数据
    localStorage.setItem('campaign','')
    localStorage.setItem('ad','')
    localStorage.setItem('CreativeGroups','')
    localStorage.setItem('convert','')
  },
  methods: {
    nexts(){
      if(this.current < 3){
        ++this.current
        this.$refs.batchContent.scrollTo(0,0)  //下一页 将滚动条滚到顶部
      }
    },
    onChange(val){
      this.current = val
    }
  },
};
</script>

<style lang="less" scoped>

  ::v-deep .ant-layout-footer{
    display: none;
    padding: 0;
  }
  
  .description{
    margin-bottom: 0
  }

  .batch-create{
    display: flex;
    width: 100%;
    height: calc( 100vh - 160px );
    overflow: hidden;
    position: relative;
    .mx-shadow(-1px,2px,10px);
    .anchor{
      padding: 20px;
      width: 200px;
      height: calc( 100vh );
      background-color: #FFFFFF;
      .mx-position('',0,0);
      .mx-shadow(-1px,2px,10px);
    }
    .content{
      overflow-y: auto;
      width: calc( 100%  );
      height: calc( 100vh - 160px );
      padding-left: 20px;
      background-color: #FFFFFF;
      .mx-shadow(-1px,2px,10px);
    }
  }

</style>